import Taro, { Component, Config } from '@tarojs/taro'
import { ScrollView, View, Image } from '@tarojs/components'
import { AtButton } from 'taro-ui';

import './about.scss'

class About extends Component {
  config: Config = {
    backgroundColor: '#c80d0d',
    navigationBarTitleText: '操作指南'
  }
  componentWillMount() {
  }

  onScrollToLower() {
  }

  render() {
    return (
      <View className='about-wrap'>
        <ScrollView
          className='scrollview'
          scrollY
          scrollWithAnimation
          style='height: 100%'
          onScrollToLower={this.onScrollToLower}
        >
          <View className='content-inner'>
            <View className='h1'>操作指南</View>
            <View className='at-article'>
              <View className='at-article__h3'>使用说明</View>
              <View className='at-article__p'>
                找到最正确的原谅方式
              </View>
              <View className='at-article__h3'>“原谅呗”？</View>
              <View className='at-article__p'>
                适用于日常生活中不经意间对亲朋好友犯错后：“请求得到对方原谅”或“主动原谅对方”的社交服务工具。保持你们的美好，希望再次见到Ta时...笑的很甜蜜...
              </View>
              <View className='at-article__h3'>原谅我呗</View>
              <View className='at-article__p'>
                1：点击原谅我呗，准备为Ta送上真挚的礼物。
              </View>
              <Image
                className='at-article__img'
                src='http://portal.51yuanliang.com/image/20190301/6368706318382673685011.png'
                mode='widthFix' />
              <View className='at-article__p'>
                2：挑选一份或多份礼物后，留下想对Ta说的话。
              </View>
              <Image
                className='at-article__img'
                src='http://portal.51yuanliang.com/image/20190301/6368706384040359396518.png'
                mode='widthFix' />
              <View className='at-article__p'>
                3：点击立即给Ta。
              </View>
              <Image
                className='at-article__img'
                src='http://portal.51yuanliang.com/image/20190301/6368706321636091163860.png'
                mode='widthFix' />
              <View className='at-article__p'>
                4：对方收到后会点击立即原谅后填写收货地址。
              </View>
              <Image
                className='at-article__img'
                src='http://portal.51yuanliang.com/image/20190301/6368706324319336359210.png'
                mode='widthFix' />
              <View className='at-article__p'>
                5：对方确认的礼物订单会在服务通知里推送给发起人，点击进入后再为Ta付款。
              </View>
              <Image
                className='at-article__img'
                src='http://portal.51yuanliang.com/image/20190304/6368729536843868679073.png'
                mode='widthFix' />
              <View className='at-article__h3'>原谅你呗</View>
              <View className='at-article__p'>
                1：点击原谅你呗，为自己挑选心仪的礼物。
              </View>
              <Image
                className='at-article__img'
                src='http://portal.51yuanliang.com/image/20190301/6368706343697351685731.png'
                mode='widthFix' />
              <View className='at-article__p'>
                2：挑选一份或多份，留下想对Ta说的话。
              </View>
              <Image
                className='at-article__img'
                src='http://portal.51yuanliang.com/image/20190301/6368706359143673568124.png'
                mode='widthFix' />
              <View className='at-article__p'>
                3：点击立即给Ta。
              </View>
              <Image
                className='at-article__img'
                src='http://portal.51yuanliang.com/image/20190301/6368706363542082236920.png'
                mode='widthFix' />
              <View className='at-article__p'>
                4：对方收到后点击获得原谅为你付款。
              </View>
              <Image
                className='at-article__img'
                src='http://portal.51yuanliang.com/image/20190301/6368706366160977113150.png'
                mode='widthFix' />
              <View className='at-article__h3'>联系我们</View>
              <View className='at-article__p'>
                操作途中如有任何疑问，可点击“在线客服”联系我们。
              </View>
            </View>
          </View>
        </ScrollView>
      </View>
    )
  }
}

export default About
